<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { adminListApi } from '@/api/manage';
import { useMenuStore } from '@/stores/menu'

const menuStore = useMenuStore();

// 列表
let currentPage = ref(1);
let tableData = ref([]);

const searchType = ref('name');
const searchText = ref('');
const searchSubmit = () => {
    adminListApi(searchType.value, searchText.value)
        .then((res) => {
            let data: [] = JSON.parse(res.data);
            tableData.value = data;
        }).catch((error) => {

        })
}

// 需要让事件只执行一次
searchSubmit();

/** 
 * 侦听 当前页码 值变化
 */
watch(currentPage, async (newValue: number, oldValue: number) => {
    searchSubmit();
})

// 编辑页
import EditPage from './edit.vue'

// 定义与 ref 同名变量
const editPageRef = ref<any>()
const editLink = (row: any) => {
    // 调用子组件的方法，通过 value
    editPageRef.value.openDialog(row.id);
}
</script>

<template>
    <div class="header-action-bar">
        <el-button type="primary" class="btn">
            <el-icon>
                <Plus />
            </el-icon>
            添加
        </el-button>

        <div class="search-bar">
            <el-select placeholder="请选择" v-model="searchType" style="width: 100px;">
                <el-option value="name" label="姓名" />
                <el-option value="address" label="地址" />
            </el-select>
            <el-input v-model="searchText">
                <template #suffix>
                    <el-icon @click="searchSubmit" style="cursor: pointer;">
                        <search />
                    </el-icon>
                </template>
            </el-input>
        </div>
    </div>

    <el-scrollbar class="table-box">
        <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="city" label="地址" width="300" />
            <el-table-column label="操作" width="210">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editLink(scope.row)"
                        v-permission="'admin:edit'"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination class="pagination-bar" background layout="prev, pager, next, total" :total="80"
            v-model:current-page="currentPage" />
    </el-scrollbar>

    <EditPage ref="editPageRef" />
</template>

<style lang="scss" scoped>
.header-action-bar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px;
    background-color: var(--ha-content-bg-color);

    .btn {
        padding: 10px 15px;
    }

    .search-bar {
        display: flex;
        margin-left: 12px;
    }
}

.table-box {
    height: calc(100vh - 160px);
    padding-left: 15px;
    background-color: var(--ha-content-bg-color);
}

.pagination-bar {
    padding: 14px;
}
</style>